<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Test Modal Windows</title>
  <script src="../../../lib/prototype.js" type="text/javascript"></script>
  <script src="../../../lib/effects.js" type="text/javascript"></script>
  <script src="../../../dist/window.js" type="text/javascript"></script>
  
  <link href="../../../themes/window/window.css" rel="stylesheet" type="text/css">
  <link href="../../../themes/window/alphacube.css" rel="stylesheet" type="text/css">
  <link href="../../../themes/shadow/mac_shadow.css" rel="stylesheet" type="text/css"> 
  <style type='text/css'>
  body {
	  background: url('../../assets/body_bg.png') repeat; 
		margin:0;
		padding:0;
  }
  </style>
  
</head>
	<div id="link"><a href="#" onclick="openModal(); return false;">Open modal window </a></div>
  <div id="link2"><a href="#" onclick="openModalInDesktop(); return false;">Open modal window in desktop</a></div><br>
  <div id="desktop" style="position: absolute; top: 10px; right: 10px; border: 1px solid black; width: 600px; height: 400px; overflow: auto">
  </div>     
<script type="text/javascript">
  //insertDebugControl();
  function runTest() {
    new UI.Window({width: 200, top: 50, left: 110, shadow: true}).show(); 
    new UI.Window({width: 200, top: 110, left: 210, shadow: true, superflousEffects: false}).show();       
  	wm = new UI.WindowManager({ container: 'desktop' });
	  new UI.Window({width: 200, top: 10, left: 10, windowManager: wm}).show();  
	}  
  Event.observe(window, "load", runTest);
  
  var top = 10, left = 10;
	
	function openModal() {
  	w = new UI.Window({shadow: true, top: top, left: left});
		top += 20;
		left += 20;
  	w.setContent($('link').innerHTML);
  	w.show(true).focus();  
		w.observe("hidden", function() {top -= 20; left -= 20})
	}	   
	
	function openModalInDesktop() {
  	w = new UI.Window({shadow: true, top: top, left: left, windowManager: wm});
		top += 20;
		left += 20;
  	w.setContent($('link2').innerHTML);
  	w.show(true).focus();  
		w.observe("hidden", function() {top -= 20; left -= 20})		
	}
	  
</script>

</body>
</html>
